嗨，大家好，
我是...還來不及想好名稱，沒關係就讓我們這樣開始吧。
今年第一次參加鐵人賽請大家多多指教。

自我介紹及參賽的目標

先做個簡單的自我介紹及說說自己參賽的目標吧。

小弟我畢業於教育系，曾經是個國小老師。去年因緣際會下接觸了軟體工程師的領域，下定決心轉換跑道。上了半年的前端工程師課程後，目前從事的是後端工程師。

因為求學階段一路都是念文組，對於程式領域是一竅不通，所以剛開始學習時碰到了許多困難。還記得當初在課程說明會時，班導師告訴我會從前端三大基礎架構的HTML、CSS、JavaScript開始學起，身為程式小白的我不禁納悶，什麼是HTML、CSS、JavaScript，電腦我只聽過PUBG、LOL、CS。這些看似平凡的用詞，對於我卻是如此陌生。學習過程中，許多專業內容需要更生活化的例子做說明，才能更好的理解跟吸收。

因此期許自己寫出淺顯易懂的文章，複習並檢視過去所學，幫助想學程式的朋友。也歡迎大家提問或糾正我的錯誤給予指教。

前端入門，入門前端。學前端，如標題簡單。

讓我們開始步入正題。

前端與後端

首先，或許有人會想問什麼是前端？什麼是後端？

在開始說明之前，讓我們來聽聽一個故事：
兔兔的生日快到了，熊熊決定到夏啤買生日禮物。於是熊熊打開夏啤官網，登入會員後開始瀏覽商品。熊熊找了很久不知道要買什麼，於是回去看看自己的歷史訂單尋找靈感，並發現了之前送給兔兔卻被用丟的鑽戒。所以決定再下一次訂單。

讓我們一起來研究看看熊熊的這些操作吧。
首先，熊熊進入夏啤官網看到了很多商品，還可以點開自己的歷史訂單頁面，看到一筆筆之前買過的訂單內容資訊。為什麼熊熊有這麼方便的網站可以使用呢？
這些熊熊「看到的畫面」就是前端工程師的工作範圍。

這些畫面可能會由設計師提供設計圖（這種設計師稱為UI/UX (使用者介面、使用者體驗) 設計師，想了解可以查看看UI/UX），再由前端工程師把網頁刻畫出來。除此之外，包含網頁的特效或互動，像是背景要飄雪、點擊後要連到哪個頁面、出現什麼特效或是確認取消的視窗、每3分鐘就要跳出一個蓋板的煩人廣告、滑鼠移過去會有變色旋轉效果…基本上我們「看到的」都屬於前端的工作範圍。

熊熊第一次登入夏啤，註冊會員時輸入了帳號、密碼、姓名、信箱、電話、生日等等資料，又下訂單買東西。之後熊熊再次輸入帳號密碼登入時，夏啤就可以知道，啊是上次註冊的熊熊，我們這裡有他的姓名、帳號、密碼等等，還有他之前的訂單紀錄，可以隨時拿出來查閱。這些資料的儲存、傳遞等等就是屬於後端的工作範圍。

一句話總結：
UI / UX設計 => 前端工程師完成畫面 => 後端工程師做資料處理。

網頁三大架構 HTML、CSS、JavaScript

對於前後端有了基礎的認識後，讓我們關心一下時事吧。

假設我們要蓋一棟大樓，從零開始會需要完成哪些步驟呢？
首先，需要把結構規劃好，哪裡是大門、管理室、中庭、每一棟屋子有幾房幾衛幾廳，分別在什麼地方，各種管線要怎麼跑。如果需要開挖地下室，可能要計算好支撐連續壁的……反正我不是專業的我不懂，但就是要規劃好架構。
規劃好架構後，再規劃整體的外觀、顏色、形狀，例如外牆要用什麼顏色，牆角要尖的還是有點圓，要用什麼材質。裝飾品要擺在那裡，距離間隔多遠等等。
除了以上的設計外，大樓也有門鈴，按了門鈴會有音樂，接通後有通話的功能，還有鏡頭可以看到外面，有監視器可以四處監控。大門也有門禁，需要特定磁扣才能刷卡通過。

以上思考的內容就像是網頁的三大架構HTML、CSS、JavaScript (簡稱JS)：
HTML就是網頁架構。如同蓋大樓時要先規劃好整體格局。
CSS就是網頁的樣式。如同蓋大樓時規劃外觀顏色等等。
JS就是網頁的互動及功能。如同大樓的各種功能一樣。

當然這只是簡單的概述，有個基礎概念，之後會個別做更詳細的介紹。就讓我們下次見囉。